<template>
  <div>
    <el-input
      v-model="value"
      placeholder="用于展示关联表单的属性，且数据不会保存"
      readonly
      v-if="!isDetail"
    />
    <p v-else>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: "relationFormAttr",
  props: ["showField", "relationField", "isDetail"],
  data() {
    return {
      value: "",
    };
  },
  computed: {
    relationData() {
      return this.$store.state.generator.relationData;
    },
  },
  watch: {
    relationData: {
      handler(val) {
        if (!this.showField || !this.relationField) return;
        let obj = val[this.relationField] || {};
        this.value = obj[this.showField] ? obj[this.showField] : "";
      },
      deep: true,
    },
  },
};
</script>